<template>
	<view class="body">
		<view class="head" :style="headStyle">
			<view class="company">{{vipCardInfo.company}}</view>
		</view>
		<view class="content">
			<view class="activeInfo flex">
				<view class="cardNum">
					  <u--input
					    placeholder="请输入卡号"
					    border="surround"
					    v-model="cardNum"
						customStyle="background:#fff;"
					  ></u--input>
				</view>
				<view class="cardPasswd">
					<u--input
					  placeholder="请输入对应的卡密"
					  border="surround"
					  v-model="cardPasswd"
					  customStyle="background:#fff;"
					></u--input>
				</view>
				<view class="goActive" @click="goActive">立即激活</view>
				<view class="flex">
					<view style="margin-left: 20rpx;">
						<u-checkbox-group
							v-model="checkboxValue1"
							placement="column"
							
						>
							<u-checkbox
								:customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in checkboxList1"
								:key="index"
								:label="item.name"
								:name="item.name"
							>
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="readAgree flex">阅读并同意<a @click="buyerArticle" class="buyerArticle">《会员协议》</a></view>
				</view>
			</view>
			<view class="activeArticle">
				<view class="title"> 激活须知 </view>
				<view v-html="activeKnowledge" style="padding-bottom: 200rpx;"></view>
			</view>
			<u-popup :show="show" mode="center"  @close="confirmRead" @open="">
					<view class="flex alPopup">
						<view class="buyerTitle">会员协议</view>
						<view v-html="vipArticle"  style="height: 1000rpx;overflow-y: auto;"></view>
						<view class="sureBtn" @click="sureBtn">确定</view>
					</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	import base from '@/config/base.js'
	export default {
		data() {
			return {
				headStyle:'background:url('+base.baseUrl+'uploads/20230529/cc4ebdc770f41371bf7d3665e7b6253d.jpg) no-repeat 100%/100%;',
				vipCardInfo:{},
				cardNum:'',
				cardPasswd:'',
				vipArticle:'asdasdasdasd',
				checkboxValue1:[],
				checkboxList1: [{
						name: '',
					},
				],
				show:false,
				activeKnowledge:'',
			}
		},
		methods: {
			buyerArticle(){
				this.show = true;
			},
			confirmRead(){
				this.show = false;
			},
			sureBtn(){
				this.show = false;
			},
			getActiveArticle(){
				http.POST('article/activeArticle').then(res=>{
					this.activeKnowledge = res.data.content;
				})
			},
			getVipArticle(){
				http.POST('article/vipArticle').then(res=>{
					this.vipArticle = res.data.content;
					console.log(this.vipArticle)
				})
			},
			getVipCardBaseInfo()
			{
				http.POST('vip_card/cardInfo').then(res=>{
					this.vipCardInfo = res.data
				})
			},
			goActive(){
				if(this.checkboxValue1.length < 1){
					uni.showToast({
						icon:'none',
						title:'请勾选协议'
					})
					return 
				}
				http.POST('vip_card/activeCard',{cardNumber:this.cardNum,cardPasswd:this.cardPasswd}).then(res=>{
					if(res.code == 1){
						uni.reLaunch({
							url:'/pages/my/user'
						})
					}else{
						uni.showToast({
							icon:'none',
							title:'激活失败请联系管理员'
						})
						
					}
				})
			}
		},
		onLoad() {
			this.getActiveArticle()
			this.getVipCardBaseInfo()
			this.getVipArticle()
		}
	}
</script>

<style>
	.flex{display: flex;}
	.body { background-color:#67b6a1 ;}
	.content { padding: 0 20rpx; background-color: #67b6a1;}
	.activeInfo { border-radius: 20rpx; flex-direction: column; padding: 30rpx 0; background-color: #428b77; align-items: center; }
	.cardNum{width: 90%;}
	.cardPasswd{margin: 25rpx 0; width: 90%;}
	.goActive {  width: 300rpx; margin: 15rpx 0 35rpx 0;  
		padding: 15rpx 0; border-radius: 50rpx; 
		background-color: #f8d1b0; text-align: center; 
		color:#ad672c;
	} 
	.readAgree { font-size: 22rpx; color: #fff; }
	.buyerArticle { color: #4fc0ec; }
	.activeArticle { 
		color: #dec7a8; background-color: #428b77; margin: 30rpx 0; padding: 20rpx; border-radius: 20rpx; 
		min-height: 700rpx;
		}
	.activeArticle .title { text-align: center; color:#f8e8ce; font-weight: bold;}
	.head {
		padding: 100rpx 0;
		position: relative;
		height: 700rpx;
		
	}
	.company {
		position: absolute;
		width: 200rpx;
		top: 750rpx;
		font-size: 30rpx;
		color: #ffe5c9;
		text-align: center;
		left: calc(50% - 100rpx);
		font-weight: bold;
	}
	.alPopup {  flex-direction: column; padding: 20rpx; width: 600rpx; justify-content: center;}
	.alPopup .buyerTitle { font-weight: bold; text-align: center; margin-bottom: 20rpx; }
	.alPopup .sureBtn {
		text-align: center;
		color: blue;
		padding: 15rpx 0;
		margin-top: 20rpx;
	}
</style>
